<%include ../../inc/header.ejs%>
<style>
    .layui-icon:hover{cursor: pointer;}
    .layui-icon{font-size: 32px; color: #1E9FFF;}
    .layui-input-block i{margin-right: 10px;}
</style>
<fieldset class="layui-elem-field layui-field-title">
    <legend>数据管理操作</legend>
</fieldset>
<!-- html主体代码 start -->
<form class="layui-form" action="" id="data-form">
    <div class="layui-form-item">
        <label class="layui-form-label">菜单名称</label>
        <div class="layui-input-block">
            <input value="<% if((typeof obj)!=='undefined'){%><%=obj.name%><%}%>" type="text" name="name" id="menu-name" required placeholder="请输入标题" class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">菜单URL</label>
        <div class="layui-input-block">
            <input value="<%if((typeof obj)!=='undefined'){%><%=obj.url%><%}%>" type="text" name="url" id="menu-url" required placeholder="请输入菜单URL" class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <div class="layui-inline">
            <label class="layui-form-label">排序</label>
            <div class="layui-input-inline">
                <input value="<%if((typeof obj)!=='undefined'){%><%=obj.sort%><%}else{%>0<%}%>" type="number" name="sort" id="menu-sort" required placeholder="请输入排序数值" class="layui-input">
            </div>
        </div>
        <div class="layui-inline" style="color:red;">
            数字越大越靠前
        </div>
    </div>
    <div class="layui-form-item">
        <div class="layui-inline">
            <label class="layui-form-label">菜单图标</label>
            <div class="layui-input-inline">
                <input value="<%if((typeof obj)!=='undefined'){%><%=obj.icon%><%}%>" id="menu-icon" required type="text" name="icon"  placeholder="请选择图标" class="layui-input">
            </div>
        </div>
        <div class="layui-inline">
            <i class="layui-icon icon-check">

            </i>
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">可用图标</label>
        <div class="layui-input-block" id="lay-icon" style="width:560px; ">
            <i class="layui-icon select-icon" data-val="#xe60c;">&#xe60c;</i>
            <i class="layui-icon select-icon" data-val="#xe611;">&#xe611;</i>
            <i class="layui-icon select-icon" data-val="#xe614;">&#xe614;</i>
        </div>
    </div>
</form>
<!-- html主体代码 end -->
<%include ../../inc/js.ejs%>

<!-- 私有脚本 start -->
<script>
    var iconArr = [
        '&#xe611;','&#xe614;','&#xe60f;','&#xe615;','&#xe641;','&#xe620;',
        '&#xe628;','&#x1007;','&#xe629;','&#xe600;','&#xe617;','&#xe606;',
        '&#xe609;','&#xe60a;','&#xe62c;','&#x1005;','&#xe61b;','&#xe610;','&#xe62d;',
        '&#xe63d;','&#xe62e;','&#xe62f;','&#xe631;','&#xe621;','&#xe632;','&#xe61c;',
        '&#xe634;','&#xe607;','&#xe635;','&#xe636;','&#xe60b;','&#xe637;','&#xe61d;',
        '&#xe640;','&#xe604;','&#xe638;','&#xe613;','&#xe61e;','&#xe60d;',
        '&#xe64c;','&#xe60e;','&#xe622;','&#xe64f;','&#xe64d;','&#xe639;','&#xe63a;',
        '&#xe624;','&#xe63b;','&#xe650;','&#xe63c;','&#xe62a;','&#xe64a;'
    ];

    function createIcon() {
        var html = '';
        var index = 1;
        for(var i=0;i<iconArr.length;i++){
            html +='<i class="layui-icon select-icon" data-val="'+iconArr[i].substring(1,7)+'">'+iconArr[i]+'</i>';
            index += 1;
            if(index%12 == 0){
                html +='<br>';
            }
        }
        $('#lay-icon').html(html);
    }
    function getPageVal() {
        var obj = getFrom('#data-form');
        if(!autoRequired('menu-',obj)){
            return false;
        }
        return obj;
    }

    $(function () {
        $('.icon-check').html($('#menu-icon').val());
        createIcon();
        $('.select-icon').click(function () {
            var obj = $(this);
            var icon = obj.html();
            $('.icon-check').html(icon);
            $('#menu-icon').val('&'+obj.attr('data-val'));
        });
    })

</script>
<!-- 私有脚本 end -->
<%include ../../inc/footer.ejs%>